import React, { FC } from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import { QuestionCheckboxStatComponentType } from "./interface";

const BarDemo: FC<QuestionCheckboxStatComponentType> = ({ stat }) => {
  return (
    <div style={{ width: "400px", height: "300px" }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          width={400}
          height={300}
          data={stat}
          margin={{
            top: 5,
            right: 30,
            left: 0,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Bar dataKey="count" fill="#7c79d2" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
};

export default BarDemo;
